import { Howl } from 'howler'
const ua = navigator.userAgent
// 是否安卓
const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1
console.log('isAndroid=', isAndroid)
export default class MusicController {
  constructor (url, {
    loop = true,
    autoplay = true,
    controller = true
  } = {}) {
    if (!url) {
      return console.error('url 不能为空')
    }
    this.url = url
    this.loop = loop
    this.autoplay = autoplay
    controller && this.createController()
    if (!isAndroid) {
      this.createAudio()
    } else {
      this.createWebAudio()
    }
    if (autoplay) {
      const fn = function () {
        this.paused && this.play(true)
      }.bind(this)
      if (!isAndroid) {
        const event = function () {
          this.audio.removeEventListener('timeupdate', event)
          document.body.removeEventListener('click', fn)
        }.bind(this)
        this.audio.addEventListener('timeupdate', event, false)
        document.body.addEventListener('click', fn, false)
      }
      document.addEventListener('WeixinJSBridgeReady', fn, false)
    }
  }

  // audio
  createAudio () {
    this.audio = document.createElement('audio')
    this.audio.src = this.url
    this.loop && (this.audio.loop = this.loop)
    this.autoplay && (this.audio.autoplay = this.autoplay)
    this.audio.addEventListener('play', this.onPlay.bind(this), false)
    this.audio.addEventListener('pause', this.onPause.bind(this), false)
  }

  // webaudio
  createWebAudio () {
    const sound = new Howl({
      src: [this.url],
      loop: this.loop,
      autoplay: this.autoplay,
      onplay: this.onPlay.bind(this),
      onpause: this.onPause.bind(this)
    })
    this.audio = sound
  }

  // 监听播放
  onPlay () {
    this.ctrl.classList.add('on')
  }

  // 监听暂停事件
  onPause () {
    this.ctrl.classList.remove('on')
  }

  /**
   * @description 创建控制器
   */
  createController () {
    const ctrl = this.ctrl = document.createElement('div')
    ctrl.classList.add('ctrl')
    ctrl.addEventListener('click', () => {
      if (this.paused) {
        this.play()
      } else {
        this.pause()
      }
    }, false)
    // this.audio.addEventListener('play', () => {
    //   ctrl.classList.add('on')
    // }, false)
    // this.el.addEventListener('pause', () => {
    //   ctrl.classList.remove('on')
    // })
    this.btn = ctrl
    document.body.appendChild(ctrl)
  }

  /**
   * @description 获取是否暂停
   * @return {*}
   */
  get paused () {
    return !isAndroid ? this.audio.paused : !this.audio.playing()
  }

  /**
   * @description 获取当前元素
   * @return {null}
   */
  get el () {
    return this.audio
  }

  /**
   * @description 播放音乐
   */
  play (replay = false) {
    if (replay) {
      this.stop()
    }
    this.audio.play()
  }

  /**
   * @description 暂停音乐
   */
  pause () {
    this.audio.pause()
  }

  /**
   * @description 停止音乐
   */
  stop () {
    this.pause()
    if (!isAndroid) {
      this.audio.currentTime = 0
    } else {
      this.audio.seek(0)
    }
  }

  /**
   * 隐藏按钮
   */
  hideBtn () {
    if (this.btn) {
      this.btn.style.display = 'none'
    }
  }

  /**
   * 显示按钮
   */
  showBtn () {
    if (this.btn) {
      this.btn.style.display = 'block'
    }
  }
}
